<template lang="html">
  <div class="musicList">
    <ul>
      <li v-for="(item,index) in musicList.result.list" >
          <img :src="item.pic_small" alt="">
          <span>{{ item.title }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name:"musicList",
  data(){
    return{
     musicList:{
     result:{}
    }
    }
  },
  created(){
    var musicURL = this.HOST+"/v1/restserver/ting?method=baidu.ting.song.getRecommandSongList&song_id=2517&num=21"
    this.$axios.get(musicURL)
    .then(res =>{
      console.log(res)
      this.musicList=res.data
      console.log( this.musicList);
    })
    .catch(error =>{
    console.log(error);
    })
  }
}
</script>

<style scoped>
.musicList ul{
  width: 100%;
}
.musicList ul li{
  width: 30%;
  float: left;
}
.musicList ul li:nth-child(2){
  margin: 0 5%;
}
.musicList ul li:nth-child(5){
  margin: 0 5%;
}
.musicList ul li:nth-child(8){
  margin: 0 5%;
}
.musicList ul li:nth-child(11){
  margin: 0 5%;
}
.musicList ul li:nth-child(14){
  margin: 0 5%;
}
.musicList ul li:nth-child(17){
  margin: 0 5%;
}
.musicList ul li:nth-child(20){
  margin: 0 5%;
}
.musicList ul li:nth-child(11){
  margin: 0 5%;
}

.musicList ul li a{
  display: block;
}
.musicList ul li a img{
  width: 100%;
}
.musicList ul li span{
  display: block;
  height: 0.6rem;
  padding-left: 0.1rem;
}

</style>
